<template>
  <van-tabbar v-model="obj.active" active-color="#f15a24" router inactive-color="#111">
    <van-tabbar-item
      to="/"
      :class="obj.active == 0 ? 'yy' : ''"
      icon="/tabbar1.png"
      >{{ obj.active == 0 ? "" : "选课" }}</van-tabbar-item
    >
    <van-tabbar-item
      to="/myClass"
      :class="obj.active == 1 ? 'yy' : ''"
      icon="/tabbar2.png"
      >{{ obj.active == 1 ? "" : "我的课" }}</van-tabbar-item
    >
    <van-tabbar-item
      to="/miaoWu"
      :class="obj.active == 2 ? 'yy' : ''"
      icon="/tabbar3.png"
      >{{ obj.active == 2 ? "" : "喵呜" }}</van-tabbar-item
    >
    <van-tabbar-item
      to="/tool"
      :class="obj.active == 3 ? 'yy' : ''"
      icon="/tabbar4.png"
      >{{ obj.active == 3 ? "" : "工具" }}</van-tabbar-item
    >
    <van-tabbar-item
      to="/my"
      :class="obj.active == 4 ? 'yy' : ''"
      icon="/tabbar5.png"
      >{{ obj.active == 4 ? "" : "我的" }}</van-tabbar-item
    >
  </van-tabbar>
  <RouterView />
</template>
<script setup>
import { reactive, ref, toRefs } from "vue";
let obj = reactive({
  active: 0,
});
</script>
<style scoped>
.yy {
  background-color: #f15a24 !important;
  /* width: 50px !important; */
  /* border-radius: 50%; */
  box-sizing: border-box;
  overflow: hidden;
  /* color: # !important; */
 

}
div.van-tabbar-item {
  /* width: 100px !important; */
  flex: 1;
}
.van-tabbar.vant-tabbar-item {
  width: 50px;
}
:deep(.van-tabbar-item) {
 
  flex: 5% !important;
  /* width: 10%; */
  box-sizing: border-box;
  /* padding: 10px; */
}
van-tabbar-item {
  padding: 10px;
}
</style>
